<template>
  <div class="menuWrap">
    <!-- 菜单 -->
    <div class="menuBox">
      <div class="lang">
        <div v-show="!langSel" class="langActive" @click="langSel = true;langMantle=true">
          {{showLang}}
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div v-show="langSel" @click="langSel = false;langMantle=false">
          <img src="../../../../../assets/imgs/close1.png" alt class="closeImg" />
        </div>
      </div>
      <div class="item" v-for="item in menus" :key="item.id" @click="handleToMenu(item)">
        <a :href="lang===item.hide?'tel://4006037726':'javascript:;'">
          <img :src="`imgs/${lang===item.hide?item.newIcon:item.icon}.png`" />
        </a>
      </div>
      <!-- 选择语言 -->
      <div class="langSelBox" v-if="langSel">
        <div
          class="list"
          v-for="item in langList"
          :key="item.id"
          @click="handleClickLang(item.id)"
        >{{item.name}}</div>
      </div>
    </div>
    <!-- 语言蒙层 -->
    <div class="v-modal" style="z-index: 9;" v-if="langMantle" @click="handleMantle"></div>
    <template v-if="mantle">
      <floor-box @handleMantle="handleMantle"></floor-box>
      <!-- 楼层蒙层 -->
    </template>
  </div>
</template>

<script>
import floorBox from 'componentsPath/common/wap/floorBox'
import api from 'servicePath/index'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    floorBox
  },
  data() {
    return {
      langSel: false, // 选择语言
      langMantle: false, // 语言蒙层
      mantle: false, // 蒙层
      langList: [
        {
          id: 'en',
          name: 'EN'
        },
        {
          id: 'zh',
          name: 'CN'
        },
        {
          id: 'de',
          name: 'DE'
        }
      ],
      floorList: [], // 楼层
      menus: [
        // {
        //   id: 1,
        //   path: 'home',
        //   icon: 'm1'
        // },
        {
          id: 5,
          path: 'infoindex',
          icon: 'm5'
        },
        {
          id: 2,
          path: 'schedule',
          icon: 'm2'
        },
        {
          id: 3,
          path: 'customer',
          icon: 'm3',
          newIcon: 'm33',
          hide: 'zh'
        },
        {
          id: 4,
          path: 'floor',
          icon: 'm4'
        },
        {
          id: 6,
          path: 'sample',
          icon: 'm6'
        }
      ]
    }
  },
  computed: {
    ...mapState(['lang', 'userInfo']),
    showLang() {
      return this.lang === 'zh' ? 'CN' : this.lang.toUpperCase()
    }
  },
  mounted() {},
  methods: {
    ...mapMutations(['changeLang']),
    // 切换语言
    handleClickLang(command) {
      this.$i18n.locale = command
      this.changeLang(command)
      this.langSel = false
      this.langMantle = false
    },
    // 楼层跳转
    handleToUrl(record) {
      if (record.type == 1 && record.title !== 'Fakuma') {
        window.open('https://showroom.covestro.com', '_blank')
      }
    },
    // 点击蒙层
    handleMantle() {
      this.mantle = false
      this.langSel = false
      this.langMantle = false
    },
    // 获取楼层
    async handleGetFloorList() {
      const params = {
        language: this.lang
      }
      const res = await api.getFloorList(params)
      this.mantle = true
      this.floorList = res.data
    },
    // 菜单跳转
    handleToMenu(item) {
      if (item.path === 'floor') {
        this.mantle = true
        this.handleGetFloorList()
        return false
      }
      if (item.path === 'sample') {
        let url = ''
        if (this.lang === 'en') {
          url = 'https://solutions.covestro.com/en/account/register'
        }
        if (this.lang === 'zh') {
          url = 'https://solutions.covestro.com/zh/account/register'
        }
        if (this.lang === 'de') {
          url = 'https://solutions.covestro.com/de/account/register'
        }
        window.open(url, '_blank')
        return false
      }
      if(this.lang==='zh' && item.path === 'customer'){
        return false
      }
      if (item.path == 'schedule'){
        if (!this.userInfo) {
          this.$router.push({
            path: `login`
          })
          return false
        } else {
          this.$router.push({
            path: `/fakuma/wap/${item.path}`
          })
          return false
        }
      }
      if (item.path == 'infoindex') {
        // 判断有无缓存信息
        console.log(!this.userInfo)
        if (!this.userInfo) {
          this.$router.push({
            path: `login`
          })
          return false
        } else {
          this.$router.push({
            path: `/fakuma/wap/${item.path}`
          })
          return false
        }
      } else {
        this.$router.push({
          path: `/fakuma/wap/${item.path}`
        })
      }
      this.$router.push({
        path: `/fakuma/wap/${item.path}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menuWrap {
  .menuBox {
    position: absolute;
    top: 55px;
    right: 20px;
    padding-top: 25px;
    .lang {
      position: absolute;
      top: 0;
      z-index: 10;
      font-size: 14px;
      .langActive {
        width: 50px;
        height: 25px;
        background: #ffffff91;
        border-radius: 15px;
        text-align: center;
        line-height: 26px;
      }
      .closeImg {
        width: 50px;
        height: 25px;
      }
      i {
        margin-left: -3px;
      }
    }
    .item {
      color: #333;
      margin-top: 15px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      img {
        width: 52px;
        height: 52px;
        vertical-align: bottom;
      }
    }
    .langSelBox {
      position: absolute;
      z-index: 10;
      top: 0;
      left: -190px;
      width: 190px;
      .list {
        float: left;
        width: 50px;
        height: 25px;
        line-height: 26px;
        background: #fff;
        color: #333;
        text-align: center;
        border-radius: 15px;
        margin-right: 12px;
        font-size: 14px;
      }
    }
  }
  .floorBox {
    position: absolute;
    top: 15%;
    left: 10%;
    right: 10%;
    z-index: 100;
    .item {
      display: inline-block;
      width: 100%;
      height: 60px;
      background: #fff;
      margin-top: 20px;
      border-radius: 8px;
      padding: 0 20px;
      b {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        color: #ff7f41;
        border: 2px solid;
        text-align: center;
        line-height: 35px;
        margin-top: 12px;
        margin-right: 10px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .grayActive {
    opacity: 0.5 !important;
  }
  .redActive {
    background: linear-gradient(to right, #ff7f41, #e6007e) !important;
    b {
      color: #fff !important;
    }
    span {
      color: #fff;
    }
  }
}
</style>